
$(function () {
    findByPage(1)
});

function findByPage(pageNum) {
    $.ajax({
        //请求方式
        type : "get",
        //请求的媒体类型
        contentType: "application/json;charset=UTF-8",
        //请求地址
        url : "/blog/page/"+pageNum,
        //数据，json字符串
        dataType:"json",
        async: true,
        //请求成功
        success : function(result) {
            let data = result.data;
            let list = data.list;

            let html_content = "";
            let date = new Date().format("yyyy-MM-dd");
            list.forEach(function (blog) {
                html_content += "<div class=\"col-12 col-lg-6 mb-5\">\n" +
                    "                    <div class=\"card flex-row listing-card-container\">\n" +
                    "                        <div class=\"w-40 position-relative\">\n" +
                    "                            <a href=/blog/details/"+blog.articleId +">\n" +
                    "                                <img class=\"card-img-left\" src="+blog.articleFirstPicture+" alt=\"Card image cap\">\n";
                if (blog.articleCreateTime == date){
                    html_content +="                                <span class=\"badge badge-pill badge-theme-1 position-absolute badge-top-left\">NEW</span>\n";
                }
                html_content += "                            </a>\n" +
                    "                        </div>\n" +
                    "                        <div class=\"w-60 d-flex align-items-center\">\n" +
                    "                            <div class=\"card-body\">\n" +
                    "                                <a href=/blog/details/"+blog.articleId +">\n" +
                    "                                    <h5 class=\"mb-3 listing-heading ellipsis\">"+blog.articleTitle+"</h5>\n" +
                    "                                </a>\n" +
                    "                                <p class=\"listing-desc text-muted ellipsis\">"+blog.articleDescription+"</p>\n" +
                    "                            </div>\n" +
                    "                        </div>\n" +
                    "                    </div>\n" +
                    "                </div>\n"

            });
            let html_pages = pageFor(data.pageNum,data.pages,2);
            $("#page_list").html(html_content);
            $("#list_navigate").html(html_pages);
        },
        //请求失败，包含具体的错误信息
        error : function(e){
            showNotification("top","提示","发送失败！","danger")
        }
    });
}
/**
 * @param pageNum   当期页码数
 * @param totalPage 总页码数
 * @param showTotal  前后个显示多少个
 * @returns {*} HTML分页导航条
 */
function pageFor(pageNum, totalPage, showTotal) {
    let firstPage = "                <li class=\"page-item \">\n" +
        "                                <a class=\"page-link first\" "+(pageNum == 1 ? 'disabled': '')+" onclick='findByPage(1)' href=\"#\">\n" +
        "                                    <i class=\"simple-icon-control-start\"></i>\n" +
        "                                </a>\n" +
        "                            </li>";
    let beforePage = "               <li class=\"page-item \">\n" +
        "                                <a class=\"page-link prev\" "+(pageNum <=1  ? 'disabled': '')+" onclick=\"findByPage("+(pageNum > 1 ? pageNum - 1 : 1) +")\" href=\"#\">\n" +
        "                                    <i class=\"simple-icon-arrow-left\"></i>\n" +
        "                                </a>\n" +
        "                            </li>";
    let nextPage = "                 <li class=\"page-item \">\n" +
        "                                <a class=\"page-link next\" "+(pageNum >= totalPage ? 'disabled': '')+"  onclick=\"findByPage("+(pageNum >= totalPage ? totalPage : pageNum + 1 )+")\" href=\"#\" aria-label=\"Next\">\n" +
        "                                    <i class=\"simple-icon-arrow-right\"></i>\n" +
        "                                </a>\n" +
        "                            </li>";
    let lastPage = "                 <li class=\"page-item \">\n" +
        "                                <a class=\"page-link last\" "+(pageNum == totalPage ? 'disabled': '')+ " onclick=\"findByPage("+totalPage+")\" href=\"#\">\n" +
        "                                    <i class=\"simple-icon-control-end\"></i>\n" +
        "                                </a>\n" +
        "                            </li>";
    let lis = firstPage + beforePage;
    let begin;
    let end;
    if (totalPage < (showTotal*2 + 1)) {
        begin = 1;
        end = totalPage;
    }else {
        begin = pageNum - showTotal;
        end = pageNum + showTotal;

        if (begin < 1) {
            begin = 1;
            end = begin + (showTotal*2)
        }
        
        if (end > totalPage){
            end = totalPage;
            begin = end - (showTotal*2)
        }
    }


    for (let i = begin; i <= end ; i++) {
        let li;
        if (pageNum == i){
            li = "<li class=\"page-item active\"><a class=\"page-link\"  href=\"#\">"+i+"</a></li>\n"
        }else {
            li = "<li class=\"page-item\"><a class=\"page-link\" onclick=\"findByPage("+i+")\" href=\"#\">"+i+"</a></li>\n"
        }
        lis += li;
    }

    lis += nextPage;
    lis += lastPage;
    return lis;
}